<!DOCTYPE html>
<html>

<head>
    <title>Heartbeat Animation</title>
    <script>
        window.onload = function () {
            // 获取canvas元素
            const canvas = document.getElementById('canvas');

            // 获取canvas的上下文
            const ctx = canvas.getContext('2d');

            // 定义头像路径
            const imgPath = 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJqlYPAOyuODiarTGRy4QwJfD1Dx7Tue3h8yIdochmsVDIjHOGlrb8xJZ0V7QjwicZ3TyJ022KjMLqQ/132';

            // 定义头像圆角半径
            const radius = 50;

            // 定义边框宽度
            const borderWidth = 5;

            // 创建新的图片对象
            const img = new Image();

            // 加载图片
            img.onload = function () {
                // 设置canvas大小
                canvas.width = img.width;
                canvas.height = img.height;

                // 画头像
                ctx.save();
                ctx.beginPath();
                ctx.arc(radius, radius, radius, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.clip();
                ctx.drawImage(img, 0, 0, img.width, img.height);
                ctx.restore();

                // 画边框
                ctx.save();
                ctx.beginPath();
                ctx.arc(radius, radius, radius + borderWidth, 0, Math.PI * 2, true);
                ctx.arc(radius, radius, radius, 0, Math.PI * 2, true);
                ctx.clip('evenodd');
                ctx.fillStyle = '#fff';
                ctx.fillRect(0, 0, img.width, img.height);
                ctx.restore();
                ctx.save();
                ctx.beginPath();
                ctx.arc(radius, radius, radius + borderWidth, 0, Math.PI * 2, true);
                ctx.arc(radius, radius, radius, 0, Math.PI * 2, true);
                ctx.clip('evenodd');
                ctx.strokeStyle = '#fff';
                ctx.lineWidth = borderWidth;
                ctx.stroke();
                ctx.restore();
            };

            // 加载头像
            img.src = imgPath;
        }
    </script>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

</html>